@extends('home.layout.base')
<link rel="stylesheet" href="{{URL::asset('./css/store/evaluates.css')}}">

@section('content')
@include('home.store.storeHeader')

<div class="main" id="storeEvaluates">
    <div class="companyTransaction_details">
        <div class="TransactionNum">
            <span style="margin-right:100px;">
                <span class="TransactionNum_circle">好评</span>
                <span class="TransactionNum_text">
                    <span>平均好评率：<a>@{{storeEvaluatesStore.avg_good}}%</a></span>
                </span>
            </span>
            <span>
                <span class="TransactionNum_circle">评分</span>
                <span class="TransactionNum_text" style="margin-right:80px;">
                    <span>平均工作速度</span>
                    <span><i class="tri" v-for="item in storeEvaluatesStore.avg_speed"></i>@{{storeEvaluatesStore.avg_speed}}分</span>
                </span>
                <span class="TransactionNum_text" style="margin-right:80px;">
                    <span>平均工作质量</span>
                    <span><i class="tri" v-for="item in storeEvaluatesStore.avg_quality"></i>@{{storeEvaluatesStore.avg_quality}}分</span>
                </span>
                <span class="TransactionNum_text">
                    <span>平均工作态度</span>
                    <span>
                        <i class="tri" v-for="item in storeEvaluatesStore.avg_attitude"></i>
                        @{{storeEvaluatesStore.avg_attitude}}分</span>
                </span>
            </span>
        </div>
        <div class="TransactionHeader">
            <div class="tsHeader">
                <div :class="{active:evaluatesType==1}" @click="changeEvaluates(1)">
                    <img src="{{URL::asset('./img/store/well.png')}}" alt="">
                    <span>好评数<a>@{{storeEvaluatesStore.good}}</a></span>
                </div>
                <div :class="{active:evaluatesType==2}" @click="changeEvaluates(2)">
                    <img src="{{URL::asset('./img/store/middle.png')}}" alt="">
                    <span>中评数<a>@{{storeEvaluatesStore.middle}}</a></span>
                </div>
                <div :class="{active:evaluatesType==3}" @click="changeEvaluates(3)">
                    <img src="{{URL::asset('./img/store/bad.png')}}" alt="">
                    <span>差评数<a>@{{storeEvaluatesStore.bad}}</a></span>
                </div>
            </div>
            <div class="tsMain" v-loading="loading">
                <div v-for="item in storeEvaluatesList.data">
                    <span class="userMes">
                        <img :src="item.user_avatar">
                        <a>@{{item.user_name}}</a>
                    </span>
                    <span class="userEvaluate">
                        <span>
                            <span class="userMes_case">
                                <!-- <span>业务名称业务名称业务名称</span> -->
                                <i class="tri" v-for="it in item.average_star"></i>
                                <a>（@{{item.average_star}}分）</a>
                            </span>
                            <span>@{{item.updated_at}}</span>
                        </span>
                        <span>@{{item.content}}</span>
                    </span>
                </div>
            </div>
        </div>
    </div>
    <div class="elementPage" v-if="pageCount>0" style="margin:0 20px;margin-top:10px;padding-bottom:20px;border-bottom:1px solid #cccccc">
        <el-pagination :pager-count="5" @current-change="handleCurrentChange" :current-page.sync="pageNumber" background prev-text="上一页" next-text="下一页" layout="prev, pager, next,jumper" :total="pageCount">
        </el-pagination>
    </div>
    <div class="editorEvaluates" v-loading="loading1">
        <span>请点击星星打分</span>
        <p>
            <span>工作速度
                <img v-for="(item,index) in workPac.T" @click="workPcT(index)" src="{{URL::asset('./img/store/xingxing.png')}}">
                <img v-for="(item,index) in workPac.F" @click="workPcF(index)" src="{{URL::asset('./img/store/huixing.png')}}">
            </span>
            <span>工作质量
                <img v-for="(item,index) in workContent.T" @click="workContentT(index)" src="{{URL::asset('./img/store/xingxing.png')}}">
                <img v-for="(item,index) in workContent.F" @click="workContentF(index)" src="{{URL::asset('./img/store/huixing.png')}}">
            </span>
            <span>工作态度
                <img v-for="(item,index) in workManner.T" @click="workMannerT(index)" src="{{URL::asset('./img/store/xingxing.png')}}">
                <img v-for="(item,index) in workManner.F" @click="workMannerF(index)" src="{{URL::asset('./img/store/huixing.png')}}">
            </span>
        </p>
        <textarea placeholder="请输入您的评价......" v-model="content"></textarea>
        <button @click="setEvaluates">发表评价</button>
    </div>
</div>
@endsection
@section('scripts')
<script>
    $(() => {
        let app = new Vue({
            el: '#storeEvaluates',
            data: () => {
                return {
                    pageCount: 0,
                    loading: false,
                    loading1: false,
                    pageNumber: 1,
                    evaluatesType: 1,
                    storeId: getQueryString("id"),
                    storeEvaluates: [],
                    storeEvaluatesStore: [],
                    storeEvaluatesList: [],
                    user_info: JSON.parse(sessionStorage.getItem("HRuserDetails")),
                    content: '',
                    workPac: {
                        T: 0,
                        F: 5,
                    },
                    workContent: {
                        T: 0,
                        F: 5,
                    },
                    workManner: {
                        T: 0,
                        F: 5,
                    }
                }
            },
            created() {
                this.getEvaluates();
            },
            mounted() {},
            methods: {
                handleCurrentChange(val) {
                    this.pageNumber = val;
                    this.getEvaluates();
                },
                changeEvaluates(type) {
                    this.evaluatesType = type;
                    this.getEvaluates();
                },

                getEvaluates() {
                    this.loading = true;
                    let storeDetailData = {
                        id: this.storeId,
                        page: this.pageNumber,
                        type: this.evaluatesType
                    }
                    apiAjax("{{ route('home.store.evaluatesList')}}", 'get', storeDetailData, (res) => {
                        this.loading = false;
                        if (res.code == 0) {
                            this.storeEvaluatesStore = res.data.store;
                            this.storeEvaluatesList = res.data.list;
                            this.pageCount = this.storeEvaluatesList.total;
                        } else {}
                    }, (erro) => {
                        this.loading = false;
                    });
                },
                //工作速度
                workPcT(index) {
                    this.workPac.T = index + 1
                    this.workPac.F = 5 - this.workPac.T
                },
                workPcF(index) {
                    if (this.workPac.T != 0) {
                        this.workPac.T = this.workPac.T + index + 1
                    } else {
                        this.workPac.T = index + 1
                    }
                    this.workPac.F = 5 - this.workPac.T
                },
                //工作质量
                workContentT(index) {
                    this.workContent.T = index + 1
                    this.workContent.F = 5 - this.workContent.T
                },
                workContentF(index) {
                    if (this.workContent.T != 0) {
                        this.workContent.T = this.workContent.T + index + 1
                    } else {
                        this.workContent.T = index + 1
                    }
                    this.workContent.F = 5 - this.workContent.T
                },
                //工作态度
                workMannerT(index) {
                    this.workManner.T = index + 1
                    this.workManner.F = 5 - this.workManner.T
                },
                workMannerF(index) {
                    if (this.workManner.T != 0) {
                        this.workManner.T = this.workManner.T + index + 1
                    } else {
                        this.workManner.T = index + 1
                    }
                    this.workManner.F = 5 - this.workManner.T
                },
                // 评价供应商
                setEvaluates() {
                    if (!this.workPac.T > 0 || !this.workContent.T > 0 || !this.workManner.T > 0) {
                        this.$message({
                            message: "请点击星星打分",
                            type: 'warning'
                        });
                        return false;
                    } else {
                        this.loading1 = true;
                        let data = {
                            user_id: this.user_info.id,
                            store_id: this.storeId,
                            content: this.content,
                            speed: this.workPac.T,
                            quality: this.workContent.T,
                            attitude: this.workManner.T
                        };
                        apiAjax("{{ route('home.store.storeEvaluatesApi')}}", 'post', data, (res) => {
                            this.loading1 = false;
                            if (res.code == 0) {
                                this.$message({
                                    message: res.msg,
                                    type: 'success'
                                });
                                this.reset();
                                this.getEvaluates();
                            } else {
                                this.$message({
                                    message: res.msg,
                                    type: 'warning'
                                });
                            }
                        }, (erro) => {
                            this.loading1 = false;
                        });
                    }
                },
                reset() {
                    this.content = "";
                    this.workPac = {
                        T: 0,
                        F: 5,
                    };
                    this.workContent = {
                        T: 0,
                        F: 5,
                    };
                    this.workManner = {
                        T: 0,
                        F: 5,
                    }
                },
            }
        })
    })
</script>
@endsection